<template>
	<view class="container">
		<!-- <view class="profit">
			<view class="money">
				<view>¥{{money}}</view>
				<text>总提现金额</text>
			</view>
		</view> -->
		
		<scroll-view scroll-y class="list report" v-if="list.length != 0" @scrolltolower="loadMore">
			<view class="list-item" v-for="(item,index) in list" :key="item.order_sn">
				<div class="item-l">
					<p class="status" :style="{'color':item.state_text=='未发放'?'#8efd8e':(item.state_text=='已拒绝'?'#f15555':'#3EB9FF')}">{{ item.state_text }}</p>
					<p class="jiner">提现金额：<span style="color: #F95452;">{{item.money}}</span></p>
					<div class="zhanghu">
						<div v-if="item.ali_name">
							<p>{{ item.ali_name }}-{{item.ali_account}}</p>
						</div>
						<div v-if="!item.ali_name && item.bank_name">
							<p>{{ item.bank_name }}-{{item.bank_card}}</p>
						</div>
					</div>
				</div>
				<div class="item-r">
					<span class="shijian">{{item.checktime}}</span>
					<p class="shouxufei">手续费<span style="color: #FF4149;">0.10</span></p>
				</div>
			</view>
		</scroll-view>

		<view class="empty" v-else>
			<image src="/static/img/user/empty.png" mode=""></image>
			<p>暂无提现记录</p>
		</view>

	</view>
</template>

<script>
import { cashList, moneyRecord } from '../../../api/api.js'
export default {
	data() {
		return {
			money: '0',
			list: [],
			total: '',
			current_page: 1,
			limit: 30,
			last_page: 1
		}
	},
	onLoad() {
		this.getRecord()
	},
	methods: {
		loadMore() {
			if (this.current_page > this.last_page) {
				uni.showToast({
					icon: 'none',
					title: '没有更多提现记录了'
				})
				return
			}
			cashList({
				limit: this.limit,
				page: this.current_page
			}).then(res => {
				for (let i = 0; i < res.data.data.length; i++) {
					this.list.push(res.data.data[i])
				}
				this.money = res.data.cash_total
				this.total = res.data.total
				this.last_page = res.data.last_page
				this.current_page = res.data.current_page + 1
			})
		},
		getRecord() {
			cashList({
				limit: this.limit,
				page: this.current_page
			}).then(res => {
				this.list = res.data.data
				this.money = res.data.cash_total
				this.total = res.data.total
				this.last_page = res.data.last_page
				this.current_page = res.data.current_page + 1
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background: #F7F7F7;
	}

	.profit {
		width: 100%;
		height: 300upx;
		background: url('/static/image/bg_tixian.png') center no-repeat ;
		display: flex;
		justify-content: center;
		align-items: center;
		background-size: 100%;
		.money {
			width: 300upx;
			text-align: center;
			color: #fff;

			view {
				font-size: 42upx;
			}

			text {
				font-size: 34upx;
			}
		}
	}

	.list {
		width: calc(100% - 60upx);
		padding: 0 30upx;
		height: calc(100% - 300upx);

		.list-item {
			width: 100%;
			min-height: 120rpx;
			padding: 15px;
			display: flex;
			justify-content: space-between;
			background: #FFFFFF;
			box-shadow: 0px 2px 4px 0px rgba(41,121,255,0.05);
			border-radius: 8px;
			margin: 15px auto;
			.item-l{
				line-height: 30px;
				.status{
					font-size: 14px;
					font-weight: bold;
				}
				.jiner{
					font-weight: 400;
					font-size: 14px;
					color: #666666;
				}
				.zhanghu{
					font-weight: 400;
					font-size: 14px;
					color: #666666;
					width: 200px;
					overflow: hidden;
				}
			}
			.item-r{
				line-height: 30px;
				.shijian{
					font-weight: 400;
					font-size: 12px;
					color: #666666;
				}
				.shouxufei{
					font-weight: 400;
					font-size: 14px;
					color: #666666;
				}
			}
		}
	}
	.empty {
		text-align: center;
		image{
			width: 207px;
			height: 171px;
			margin: 20px auto;
		}
		p{
			font-weight: 400;
			font-size: 14px;
			color: #A7A5A5;
		}
	}
	@media screen and (min-width:800px){
		.list{
			height:calc(100vh - 100upx)!important;
		}
	}
</style>
